<template>
  <div class="nav-model">
    <!-- 经开区教育局导航 -->
    <div class="nav">
      <ul class="nav-ul clearFix">
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="$route.path.indexOf(item.path) != -1 ? 'active' : ''"
        >
          <router-link :to="item.path">{{ item.title }}</router-link>
        </li>
      </ul>
      <el-button type="warning" icon="el-icon-user">管理登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          path: "/educationIndex/eduHome",
          title: "首页"
        },
        {
          path: "/educationIndex/eduWorkAction",
          title: "工作动态"
        },
        {
          path: "/group",
          title: "通知公告"
        },
        {
          path: "/examInfo",
          title: "招生考试信息"
        },
        {
          path: "/serviceInfo",
          title: "双公示"
        },
        {
          path: "/policy",
          title: "资料下载"
        },
        {
          path: "/educationIndex/eduLeader",
          title: "领导组织"
        }
      ]
    };
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.nav-model {
  background-color: #fff;
  border-bottom: 1px solid #eeeeee;
  .nav {
    width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav-ul {
      display: block;
      width: 85%;
      li {
        float: left;
        font-size: 20px;
        color: $nomal-color;
        margin: 0 5px;
        text-align: center;
        position: relative;
        // display: inline-block;
        a {
          display: block;
          padding: 34px 0;
          color: inherit;
          width: 156px;
          font-size: inherit;
        }
        &::after {
          content: " ";
          width: 0%;
          position: absolute;
          left: 50%;
          bottom: 0;
          height: 4px;
          transform: translateX(-50%);
          transition: 0.3s;
          background-color: $font-color;
        }
        &:hover::after {
          width: 100%;
        }
        &::before {
          content: " ";
          width: 1px;
          height: 21px;
          background-color: #e6e6e6;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        &:last-child::before {
          display: none;
        }
      }
      li.active {
        color: $font-color;
        font-weight: 600;
        &::after {
          width: 100%;
        }
      }
    }
  }
}
</style>
